<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="false" >
			<block slot="left">
				<view class="flex justify-between " >
					<image :src="imgUrl + '/images/tianjia.png'" mode="aspectFill" class="image-slot" @click="GotoPopfriends"></image>
					<image :src="imgUrl + '/images/contact.png'" mode="aspectFill" class="image-slot" @click="Gotocontacted"></image>
				</view>				
			</block>
			<block slot="content">消息中心</block>
		</cu-custom>
				
		<!-- 添加好友弹出层 -->
		<free-left-popup v-if="showleft" ref="extendpopup" :bodyWidth="285" :bodyHeight="325"
			bodyBgColor="bg-dark" transformOrigin="right top">
			<view class="flex flex-column" 
			style="width: 285rpx;height: 325rpx;">
				<view class="flex-1 flex align-center" 
				hover-class="bg-hover-dark"
				v-for="(item,index) in extentsList"
				:key="index"
				@click="clickPopup(item)">
					<image class="margin-sm" style="width: 38rpx; height: 38rpx;" :src="item.icon"></image>
					<text class="font-md text-white">{{item.name}}</text>
				</view>
			</view>
		</free-left-popup>
		
		<view class="bg-danger p-3 left-0 right-0 flex align-center justify-between" v-if="!chat || !chat.isOnline">
			<text class="text-white font">当前处于离线状态</text>
			<view class="border py-1 px-2 rounded" hover-class="bg-hover-danger" @click="chat.reconnectConfirm()">
				<text class="text-white font">重新连接</text>
			</view>
		</view>
		
		<!-- 置顶列表 -->
		<block v-for="(item,index) in list" :key="index">
			<free-media-list v-if="item.istop" :item="item" :index="index"
			@long="long"></free-media-list>
		</block>
		<!-- 非置顶列表 -->
		<block v-for="(item,index) in list" :key="index">
			<free-media-list v-if="!item.istop" :item="item" :index="index"
			@long="long"></free-media-list>
		</block>
		
		<!-- 未登录消息列表提示-->
		<u-empty v-if="list.length==0"  mode="message" text="暂无聊天消息" font-size="32" iconSize="150" marginTop="200"></u-empty>
		
		<!-- 弹出层 -->
		<free-popup ref="extend" :bodyWidth="240" :bodyHeight="getMenusHeight">
			<view class="flex flex-column" style="width: 240rpx;"
				:style="getMenusStyle">
				<view class="flex-1 flex align-center" 
				hover-class="bg-light"
				v-for="(item,index) in menus"
				:key="index"
				@click="clickEvent(item.event)">
					<text class="font-md pl-3">{{item.name}}</text>
				</view>
			</view>
		</free-popup>
		
		<!-- <q-tabbar :active="3" :count="totalNoreadnum"></q-tabbar> -->
	</view>
</template>

<script>
	import freeBase from "@/components/mixin/free-base.js"
	import freeMediaList from "@/components/free-ui/free-media-list.vue"
	import freeBadge from "@/components/free-ui/free-badge.vue"
	import freePopup from "@/components/free-ui/free-popup.vue"
	import freeLeftPopup from "@/components/free-ui/free-left-popup.vue"
	import auth from '@/components/mixin/auth.js';
	import { mapState } from 'vuex'
	
	export default {
		mixins:[freeBase,auth],
		components: {
			freeMediaList,
			freeBadge,
			freePopup,
			freeLeftPopup
		},
		data() {
			return {
				imgUrl:this.$site.img_url,
				// showSheet: false,
				showleft:true,
				// showChatSheet: false,
				propIndex:-1,
				// chatlist:[],
				menus:[
					{
						name:"设为置顶",
						event:"setTop"
					},
					{
						name:"删除该聊天",
						event:"delChat"
					}
				],
				extentsList:[
					{
						name:"发起群聊",
						event:"navigateTo",
						path:'/pages/infochat/mail?type=createGroup',
						icon:"https://hys-online.oss-cn-guangzhou.aliyuncs.com/hyz/icon/chat-group.png"
					},
					{
						name:"添加好友",
						event:"navigateTo",
						path:'/pages/message/search/search',
						icon:"https://hys-online.oss-cn-guangzhou.aliyuncs.com/hyz/icon/add-user.png"
					},
					{
						name:"扫一扫",
						event:"scan",
						icon:"https://hys-online.oss-cn-guangzhou.aliyuncs.com/hyz/icon/search-one.png"
					},

				],
				// sheetList: [{
				// 	text: '删除',
				// 	color: 'red'
				// }],
				// msgNum: {
				// 	thumb_collect: 0,
				// 	follow: 0,
				// 	comment: 0,
				// 	article_msg_list: [],
				// 	chat_msg_list: []
				// },
				// checkedMsgId: '',
				// checkedIndex: '',
				// checkedMsgUid: ''
			};
		},
		computed: {
			// msgCount() {
			// 	return this.$store.state.messegeNum;
			// },
			...mapState({
				list:state=>state.user.chatList,
				totalNoreadnum:state=>state.user.totalNoreadnum,
				chat:state=>state.user.chat
			}),
			// 动态获取菜单高度
			getMenusHeight(){
				let H = 100
				return this.menus.length * H
			},
			// 获取菜单的样式
			getMenusStyle(){
				return `height: ${this.getMenusHeight}rpx;`
			}
		},
		onShow() {
			// if (uni.getStorageSync('userInfo').uid) {
			// 	this.getMsgNum();
			// }
		},
		methods: {
			//聊天
			// onClick(){
			// 	uni.navigateTo({
			// 		url: '/pages/chat/chat/chat?params='+encodeURIComponent(JSON.stringify({
			// 			id:this.item.id,
			// 			name:this.item.name,
			// 			avatar:this.item.avatar,
			// 			chat_type:this.item.chat_type,
			// 		})),
			// 	});
			// 	this.chat.readChatItem(this.item.id,this.item.chat_type)
			// },
			//长按弹窗
			long({x,y,index}){
				// 初始化 索引
				this.propIndex = index
				console.log('...........',this.propIndex);
				// 拿到当前对象
				let item = this.list[index]
				// 判断之前是否处于置顶状态
				this.menus[0].name = item.istop ? '取消置顶' : '设为置顶'
				
				this.$refs.extend.show(x,y)
			},
			// 分发菜单事件
			clickEvent(event){
				switch (event){
					case "setTop": // 置顶/取消置顶会话
					this.setTop()
						break;
					case "delChat": // 删除当前会话
					this.delChat()
						break;
				}
				this.$refs.extend.hide()
			},
			//添加顶部框
			clickPopup(e){
				switch (e.event){
					case 'navigateTo':
					uni.navigateTo({
						url: e.path,
					});
						break;
					case 'scan':
					uni.scanCode({
					    success: (res)=> {
							if(res.scanType === 'QR_CODE'){
								let result = JSON.parse(res.result)
								switch (result.type){
									case 'group':
									uni.showLoading();
									this.$C.post('/group/checkrelation',{
										id:parseInt(result.id)
									}).then(res2=>{
										if(!res2.status){
											uni.navigateTo({
												url: '/pages/message/scan-add/scan-add?params='+encodeURIComponent(JSON.stringify(res2.group)),
											});
										} else {
											uni.navigateTo({
												url: '/pages/inchat/chat?params='+encodeURIComponent(JSON.stringify({
													id:res2.group.id,
													name:res2.group.name,
													avatar:res2.group.avatar,
													chat_type:'group',
												})),
											});
											this.chat.readChatItem(res2.group.id,res2.group.chat_type)
										}
										uni.hideLoading()
									}).catch(err=>{
										uni.hideLoading()
									})
									
										break;
									case 'user':
									uni.navigateTo({
										url: '/pages/infochat/user-base?user_id='+result.id,
									});
										break;
									default:
										break;
								}
							}
					    }
					});
						break;
					default:
					uni.showToast({
						title: '靓仔自己发挥',
						icon: 'none'
					});
						break;
				}
			},

			// 删除当前会话
			delChat(){
				// this.chatlist.splice(this.propIndex,1)
				let item = this.list[this.propIndex]
				this.chat.removeChatItem(item.id,item.chat_type)
			},
			// 置顶/取消置顶会话
			setTop(){
				let item = this.list[this.propIndex]
				item.istop = !item.istop
			},
			
			//添加好友
			GotoPopfriends(){
				this.$refs.extendpopup.show(uni.upx2px(50),uni.upx2px(120))
				// this.$refs.extendpopup.show()
			},
			//通讯录
			Gotocontacted(){
				uni.navigateTo({
					url:'./contact-list/contact-list'
				})
			},
			// getMsgNum() {
			// 	this.$H.post('message/num').then(res => {
			// 		this.msgNum = res.result;
			// 		this.$store.state.messegeNum = [0, 0, 0, res.result.all_count, 0];
			// 	});
			// },
		}
	};
</script>

<style lang="scss" scoped>
	.image-slot{
		width: 40rpx; 
		height: 50rpx;
		margin: 20rpx 10rpx 0 20rpx;
	}
	.nav-icon {
		width: 90rpx;
		height: 90rpx;
		margin-bottom: 10rpx;
	}

	.msg-wrap {
		background-color: #FFFFFF;
		margin-top: 20rpx;

		.title {
			margin: 20rpx;
		}

		.msg-item {
			padding: 20rpx;
			display: flex;

			.avatar-box {
				position: relative;

				.avatar {
					margin-right: 20rpx;

				}
			}

			.right {
				display: flex;
				flex-direction: column;
				flex: 1;

				.desc {
					font-size: 24rpx;
					color: #999;
					display: flex;

					.time {
						white-space: nowrap;
						margin-left: auto;
					}
				}
			}
		}
	}

	// 
	.msg-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 800rpx;

		.img {
			width: 200rpx;
			margin-top: 100rpx;
		}

		.txt {
			color: #999;
			font-size: 20rpx;
			margin-top: 20rpx;
		}
	}
	.grid-box{
		padding: 20rp 0;
	}
	.cuIcon-roundadd{
		font-family: "cuIcon";
		font-size: 40rpx;
		font-style: normal;
	}
.image-slot{
	width: 40rpx;
	height: 50rpx;
}
</style>
